<template>
  <div>
    <el-row style="height: 30%">
      <el-col>
        <div style="margin-top: 20px">
          <span>可选文件</span>
          <!--          <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、三行的选中状态</el-button>-->
          <!--          <el-button @click="toggleSelection()">取消选择</el-button>-->
          <!--          <el-input placeholder="请输入" v-model="selectParam" class="input-with-select" size="small">-->
          <!--            <el-select v-model="select" slot="prepend" placeholder="请选择">-->
          <!--              <el-option label="文件名称" value="1"></el-option>-->
          <!--              <el-option label="企业信息" value="2"></el-option>-->
          <!--            </el-select>-->
          <!--            <el-button slot="append" icon="el-icon-search"></el-button>-->
          <!--          </el-input>-->
        </div>
        <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            height="200"
            :row-class-name="tableRowClassName"
            @selection-change="handleSelectionChange">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              prop="fileName"
              label="文件名称"
              show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <span>已选文件</span>
      <el-col style="min-height:100px;max-height: 100px;overflow-y: auto">
        <el-card class="box-card" shadow="never">
          <el-tag
              v-for="tag in tags"
              :key="tag.fileName"
              closable
              @close="handleClose(tag)"
              :type="tag.type">
            {{ tag.fileName }}
          </el-tag>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-button size="small" @click="specifyprompt('润色')">润色</el-button> &nbsp;&nbsp;
      <el-button size="small" @click="specifyprompt('续写')">续写</el-button> &nbsp;&nbsp;
      <el-button size="small" @click="specifyprompt('重写')">重写</el-button> &nbsp;&nbsp;
    </el-row>
    <el-row>
      <el-col>
        <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            maxlength="2000"
            show-word-limit
            v-model="textarea">
        </el-input>
      </el-col>
      <el-col>
        <el-button type="text" @click="aiassistant()">询问AI助手</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-card class="box-card" shadow="never" v-loading="loading" style="height: 35vh;overflow-y: auto">
        <div slot="header">
          <span>设置输出结果最大字数为：
            <el-input-number size="mini" v-model="resultCount" style="width: 130px;height: 3px" :min="1" :max="20000"
                             :required="true"
                             label="描述文字"></el-input-number>
          </span>
          <!--          <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
        </div>
        {{ aiResult }}
      </el-card>
    </el-row>
  </div>
</template>
<script>
import {listAiFiles, aiassistant, specifyprompt} from "../api/index";

export default {
  data() {
    return {
      selectParam: '',
      select: '1',
      tableData: [{
        fileName: '19-21项目收入.xlsx'
      }, {
        fileName: 'TMX-E-2022-0004-大茂伟瑞柯 --E202后组合灯（双章）.pdf'
      }, {
        fileName: 'C001提名信-签字盖章版.pdf'
      }, {
        fileName: '常州市服务型制造示范企业申报材料-大茂WORD版本.doc'
      }],
      multipleSelection: [],
      tags: [],
      textarea: '',
      selectText: '',
      aiResult: '',
      loading: false,
      resultCount: 1000,
      activeNames: ['1'],
      handleChange(val) {
        // eslint-disable-next-line no-console
        console.log(val);
      }
    }
  },
  created() {
    this.$bus.$on("receiveSelectionText", message => {
      // this.textarea = message
      this.selectText = message
    });
    //获取ai文件列表
    this.listAiFiles()
  },
  methods: {
    async specifyprompt(type) {
      //
      if (this.selectText.length > 1500) {
        this.$message({
          message: '选中的文字不超过1500字',
          type: 'warning'
        });
        return;
      }
      if (this.selectText.length == 0) {
        this.$message.error('请确定需要' + type + '的文字!');
        return;
      }
      if (this.tags.length == 0) {
        this.$message({
          message: '根据指定文档可以生成更好的结果!',
          type: 'warning'
        });
      }
      //
      this.loading = true
      let param = {}
      param.prompt = type
      param.text = this.selectText
      param.file_list = this.tags.map(t => t.fileName)
      param.textsize = this.resultCount
      await specifyprompt(param).then((res) => {
        // console.log("specifyprompt-res", res)
        this.aiResult = res.data
        this.loading = false
      })
    },
    async aiassistant() {
      if (this.textarea.length == 0) {
        this.$message.error('请确定需要询问的文字!');
        return;
      }
      //如果this.selectText 存在，就走specifyprompt方法
      if (this.selectText.length >0){
        await this.specifyprompt(this.textarea);
        return;
      }
      this.loading = true
      let param = {}
      param.question = this.textarea
      // param.textsize = this.resultCount
      await aiassistant(param).then((res) => {
        // console.log("ai-res", res)
        this.aiResult = res.data
        this.loading = false
      })
    },
    async listAiFiles() {
      await listAiFiles().then(res => {
        if (res.data) {
          this.tableData = res.data.entries;
        }
      });
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(row) {
      console.log("row", row)
      this.multipleSelection = row;
      this.tags = this.multipleSelection;
      console.log("multipleSelection", this.multipleSelection)
    },
    tableRowClassName(row) {
      //设置row对象的index
      row.row.index = row.rowIndex;
    },
    handleClose(tag) {
      // eslint-disable-next-line no-console
      const newTags = this.tags.filter(t => t.fileName != tag.fileName);
      this.tags = newTags;
      this.$refs.multipleTable.toggleRowSelection(this.tableData[tag.index]);
    }
  }
}
</script>
<style>
.el-row {
  margin-bottom: 20px;

&
:last-child {
  margin-bottom: 0;
}

}
.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.el-select .el-input {
  width: 110px;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.box-card {
  overflow-y: auto /* 开启滚动显示溢出内容 */
}
</style>